<style scoped>
.toast {
  position: fixed;
  left: 40%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  z-index: 9999;
  transition: all 0.3s ease;
  opacity: 0;
}

/* 不同类型样式 */
.default {
  background-color: rgba(0, 0, 0, 0.7);
}

.success {
  background-color: #52c41a;
}

.error {
  background-color: #f5222d;
}

.warn {
  background-color: #faad14;
}
</style>
<template>
  <div class="toast" :class="type" :style="{
    top: `${top}%`,
    opacity: show ? 1 : 0,
    transform: show ? 'translateY(0)' : 'translateY(-20px)'
  }">
    {{ message }}
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  message: { type: String, required: true }, // 提示文本
  type: { type: String, default: 'default' }, // 类型：success/error/warn/default
  duration: { type: Number, default: 2000 }, // 显示时长(ms)
  top: { type: Number, default: 80 } // 距离顶部距离
});

const show = ref(false);
const emit = defineEmits(['close']);

// 显示动画
onMounted(() => {
  show.value = true;
  // 自动关闭
  setTimeout(() => {
    show.value = false;
    // 动画结束后通知父级移除DOM
    setTimeout(() => emit('close'), 300);
  }, props.duration);
});
</script>
